<template>
      <a-row class="footContainer">
        <a-col :span="6" class="playing"><Playing></Playing></a-col>
        <a-col :span="12" class="controls"><Controls></Controls></a-col>
        <a-col :span="6" class="otherControls"><OtherControls></OtherControls></a-col>
      </a-row>
</template>

<script>
import Playing from "@/components/web/footer/Playing";
import Controls from "@/components/web/footer/Controls";
import OtherControls from "@/components/web/footer/OtherControls";
export default {
  name: "Footer",
  components:{
    Playing,Controls,OtherControls
  },
  updated() {
  },
  methods:{
    test(){
    }
  }
}
</script>

<style scoped>
.footContainer{
  width: 100%;
  height: 4rem;
  border-top: 1px  #e8e8e8 solid;
  background-color: white;
}
.playing{
  height: 4rem;
}
.controls{
  height: 4rem;
}
.otherControls{
  height: 4rem;
}
</style>
